<include file="public@header" />
<link rel="stylesheet" href="__STATIC__/css/zTree_v3/zTreeStyle/zTreeStyle.css?v={:time()}" type="text/css">
<style>
    body {
        background-color: white;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    div, p, table, th, td {
        list-style: none;
        margin: 0;
        padding: 0;
        color: #333;
        font-size: 13px;
        font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
    }
    #testIframe {
        margin-left: 10px;
    }
    .expander{margin-left: -20px;}
    .action_ul{overflow:hidden; font-size:16px; font-family:'黑体'; margin:10px 0px;}
    .action_ul li{padding:0px 10px; display:inline;text-align:center; float:left; cursor:pointer}
    .action_ul li img{margin:5px 0; width: 18px}
    .action_ul li p{margin: 0 0 5px;}
    .visua_div{border:2px solid #E3EEF4; white-space: nowrap;overflow-x: auto;}
    .visua_child{position:relative;display: inline-block;width:155px; height:160px; border-radius:10px; margin:3px; text-align:center; padding:15px 0 10px 0; vertical-align: text-top;}
    .visua_child input{margin: 0 2px; background:#fff}
    .visua_child p{margin: 0 0 3px; width: 100%;height: auto;white-space:normal;overflow: hidden;}

    .borderRight{border-right:2px solid #ccc}
    .bg_qianlv{background-color:#E9FEC0;}
    .bg_huanglv{background-color:#808000;}
    .bg_lan{background-color:#8080FF;}
    .bg_cheng{background-color:#F7E1CC;}
    .bg_hui{background-color:#E6E6E6;}
    .bg_bai{background-color:#fff; border:1px solid #000}
    .bg_lv{background-color:#00CC00;}
    .bg_huang{background-color:#F3D776;}
    .bg_red{background-color:#FF6699;}
    .bg_mei{background-color:#E792E0;}
    .bg_blue{background-color:#33CCFF;}
    .gege{width:15px; height:15px; float:left; margin:0 3px}
    .visua_child img{position:absolute; margin-top:-15px; left:85%; width:15px; height:15px}
    #center-tree{
        width: 16.12%;
        padding: 0;
        border-right: 1px solid #cccccc;
        overflow-y: auto;
        height: 730px;
        border-right: #999999 1px dashed;
    }
    #center-right {
        width: 83.2%;
        padding: 0;
    }
    #center-right .visua_div{
        border:2px solid #E3EEF4;
        white-space: nowrap;
        padding: 0;
        overflow-y: auto;
        height: 628px;
    }
</style>
</head>

<body>

<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a href="{:url('Archives/visua')}">{:lang('ADMIN_VISUA_INDEX')}</a></li>
        <li><a href="{:url('Archives/archives')}">档案管理</a></li>
    </ul>
    <div>
        <form class="js-ajax-form" action="{:url('Archives/visua')}" method="get">
            <div style="display: none" id="categorys">
                {$categorys}
            </div>

            <div class="row">
                <div class="col-lg-2" id="center-tree" >
                    <input type="text" style=" width:80%; margin-bottom:5px;" class="form-control" name="name" value="{$name}" placeholder="按照墓位编号搜索"/>
                    <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>

                </div>
                <div class="col-lg-8" id="center-right" >
                    <div class="col-lg-12" style="padding: 0;">
                        <div style=" overflow:hidden; background:#F7F7F7; padding:5px 10px">
                            <div class="bg_qianlv gege"></div><span style="float:left">无规划</span>
                            <div class="bg_huanglv gege"></div><span style="float:left">无产品</span>
                            <div class="bg_blue gege"></div><span style="float:left">空闲</span>
                            <div class="bg_cheng gege"></div><span style="float:left">已认购</span>
                            <div class="bg_lv gege"></div><span style="float:left">定金</span>
                            <div class="bg_huang gege"></div><span style="float:left">购买未使用</span>
                            <div class="bg_mei gege"></div><span style="float:left">部分安葬</span>
                            <div class="bg_red gege"></div><span style="float:left">全部安葬</span>
                            <div class="bg_hui gege"></div><span style="float:left">迁墓中</span>
                        </div>
                        <ul class="action_ul">
                            <li>
                                <a id="productInfo">
                                    <img src="__TMPL__/Public/assets/images/chakandangan.png">
                                    <p>添加/查看档案</p>
                                </a>
                            </li>
                            <li>
                                <p style=" margin-top: 10px;">
                                    <a class="btn btn-default" onClick="selectAll()">全选</a>
                                    <a class="btn btn-default" onClick="selectNone()">全不选</a>
                                    <a class="btn btn-default" onClick="selectInvert()">反选</a>
                                </p>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-12" style="padding: 0;">
                        <div class="visua_div"></div>
                    </div>
                </div>
            </div>


            <!--<table border=0 style="align-items: left;">
                <tr>
                    <td width=15% align=left valign=top style="BORDER-RIGHT: #999999 1px dashed; padding-bottom: 2%">
                        <div>
                            <input type="text" style=" width:80%; margin-bottom:5px;" class="form-control"
                                   name="name" value="{$name}" placeholder="按照墓位编号搜索"/>
                            <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
                        </div>
                    </td>
                    <td width=95% align=left valign=top>
                        <div style="width:80%; float:left;">
                            <div style=" overflow:hidden; background:#F7F7F7; padding:5px 10px">
                                <div class="bg_qianlv gege"></div><span style="float:left">无规划</span>
                                <div class="bg_huanglv gege"></div><span style="float:left">无产品</span>
                                <div class="bg_blue gege"></div><span style="float:left">空闲</span>
                                <div class="bg_cheng gege"></div><span style="float:left">已认购</span>
                                <div class="bg_lv gege"></div><span style="float:left">定金</span>
                                <div class="bg_huang gege"></div><span style="float:left">购买未使用</span>
                                <div class="bg_mei gege"></div><span style="float:left">部分安葬</span>
                                <div class="bg_red gege"></div><span style="float:left">全部安葬</span>
                                <div class="bg_hui gege"></div><span style="float:left">迁墓中</span>
                            </div>

                            <ul class="action_ul">
                                <div style="display: none">
&lt;!&ndash;                                    <li class="borderRight">&ndash;&gt;
&lt;!&ndash;                                        <a id="1">&ndash;&gt;
&lt;!&ndash;                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">&ndash;&gt;
&lt;!&ndash;                                            <p>认购</p>&ndash;&gt;
&lt;!&ndash;                                        </a>&ndash;&gt;
&lt;!&ndash;                                    </li>&ndash;&gt;
                                    <li>
                                        <a id="editProductInfo">
                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                            <p>查看产品详情</p>
                                        </a>
                                    </li>
                                    &lt;!&ndash;<li class="borderRight">
                                        <a id="productInfo">
                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                            <p>添加墓位信息</p>
                                        </a>
                                    </li>&ndash;&gt;
                                    <li class="borderRight">
                                        <a id="addTombstoneInformation">
                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                            <p>添加墓位信息</p>
                                        </a>
                                    </li>
                                    &lt;!&ndash; <li>
                                         <a  class="tombareacoldelete "  data-msg="确定要删除吗？"
                                             data-href="{:url('tombareacoldelete')}">
                                             <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                             <p>墓位删除</p>
                                         </a>
                                     </li>
                                     <li class="borderRight">
                                         <a id="addTombarea">
                                             <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                             <p>墓位添加</p>
                                         </a>
                                     </li>&ndash;&gt;
                                    <li>
                                        <a  class="tombareacoldelete" data-msg="确定要保留吗？"
                                            data-href="{:url('tombareacolretain')}">
                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                            <p>保留</p>
                                        </a>
                                    </li>
                                    <li class="borderRight">
                                        <a class="tombareacoldelete" data-msg="确定要取消保留吗？"
                                           data-href="{:url('tombCancelReservation')}">
                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                            <p>取消保留</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a  data-msg="确定要取消隐藏吗？"
                                            data-href="{:url('tombCancelUnhide')}">
                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                            <p>取消隐藏</p>
                                        </a>
                                    </li>
                                    <li class="borderRight">
                                        <a class="tombareacoldelete" data-msg="确定要隐藏吗？"
                                           data-href="{:url('tombCancelhide')}">
                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                            <p>隐藏</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="tombareacoldelete" data-msg="确定要合并吗？"
                                           data-href="{:url('tombMerge',array('ids'=>1))}">
                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                            <p>合并</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="tombareacoldelete" data-msg="确定要取消合并吗？"
                                           data-href="{:url('tombCancelMerge')}">
                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                            <p>取消合并</p>
                                        </a>
                                    </li>
                                    <li >
                                        <a href="javascript:location.reload();">
                                            <img src="__TMPL__/Public/assets/images/ico_msg_s.png">
                                            <p>刷新</p>
                                        </a>
                                    </li>
                                </div>
                                <li>
                                    <a id="productInfo">
                                        <img src="__TMPL__/Public/assets/images/chakandangan.png">
                                        <p>添加/查看档案</p>
                                    </a>
                                </li>
                                <li>
                                    <p style=" margin-top: 10px;">
                                        <a class="btn btn-default" onClick="selectAll()">全选</a>
                                        <a class="btn btn-default" onClick="selectNone()">全不选</a>
                                        <a class="btn btn-default" onClick="selectInvert()">反选</a>
                                    </p>
                                </li>
                            </ul>
                            <div class="visua_div"></div>
                        </div>
                    </td>
                </tr>
            </table>-->
        </form>
    </div>
</div>

<script type="text/javascript" src="__STATIC__/js/zTree_v3/jquery.ztree.core.js?v={:time()}"></script>
<SCRIPT type="text/javascript">

    $(document).ready(function () {
        var t = $("#tree");
        var categorys = JSON.parse($("#categorys").html());

        t = $.fn.zTree.init(t, setting, categorys);
        var zTree = $.fn.zTree.getZTreeObj("tree");
        var treeNode = zTree.getNodeByTId("{$selected_id_a}");

        zTree.selectNode(zTree.getNodeByParam("tId", "{$selected_id_a}",null))
        var id = treeNode.id;
        if(id>0){
            getHtml(id,treeNode);
        }
    });
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            beforeClick: function (treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    getHtml(treeNode.id,treeNode);
                    return true;
                }
            },
        }
    };
    function getHtml(id,treeNode) {
        if(id>0){
            $.ajax({
                url		: "{:url('Visua/tombareacol')}",
                type	: "post",
                dataType: "json",
                data	: {'id':id,'Ajax': 1},
                success : function(result){
                    if(result.data.length == 0){
                        $(".visua_div").html('');
                        return;
                    }
                    var html="";
                    $.each(result.data, function(i, n){
                        $.each(n.col, function(y, m){
                            switch (m.col_status) {
                                case 1:html+="<div class='visua_child bg_blue'>";break;
                                case 2:html+="<div class='visua_child bg_cheng'>";break;
                                case 3:html+="<div class='visua_child bg_lv'>";break;
                                case 4:html+="<div class='visua_child bg_qianlv'>";break;
                                case 5:html+="<div class='visua_child bg_huang'>";break;
                                case 6:html+="<div class='visua_child bg_mei'>";break;
                                case 7:html+="<div class='visua_child bg_red'>";break;
                                case 8:html+="<div class='visua_child bg_hui'>";break;
                                default:html+="<div class='visua_child bg_huanglv'>";break;
                            }


                            if (m.reacher != ''  && m.reacher != null) {
                                if (m.login_id != 1  || m.login_id != 5) {
                                    html += "<img src='__TMPL__/Public/assets/images/peo.png' name='diding' title='抵顶人姓名:" + m.reacher + "'/>";
                                } else {
                                    html += "<div style='position: absolute; right: 5%;top: 1%; color: #13227a;' name='diding'>" + m.reacher + "</div><p></p>";
                                }
                            } else {
                                // html += "<div style='position: absolute; right: 5%;top: 1%; color: #13227a;'>" + m.reacher + "</div><p></p>";
                            }

                            html+="<p><input type='checkbox' name='no[]' data-id='"+treeNode.tId+"' data-type='"+n.cate_id+"' value='"+m.colID+"' col-status='"+m.col_status+"' order-id='"+m.order_id+"' data-msg='"+n.cate_id+"'>"+m.num+"</p>";
                            // if(m.tomb_regulation == 1){
                            //     html+="<p>单穴</p>";
                            // }else if(m.tomb_regulation == 2){
                            //     html+="<p>双穴</p>";
                            // }else if(m.tomb_regulation == 3){
                            //     html+="<p>三穴</p>";
                            // }
                            // if(m.selling_price){
                            //     html+="<p>单价:"+m.selling_price+"</p>";
                            // }
                            if(m.col_status == 2 || m.col_status == 1 || m.col_status == 3){
                                if(m.selling_price) {
                                    html += "<p>单价:" + m.selling_price + "</p>";
                                }
                            }
                            if(m.col_status == 2 || m.col_status == 3){
                                if (m.shoppingguide) {
                                    html += "<p>业务员:" + m.shoppingguide + "</p>";
                                }
                            }
                            if(m.col_status == 5 || m.col_status == 6|| m.col_status == 7){
                                if (m.buyer_name) {
                                    html += "<p>持证人:" + m.buyer_name + "</p>";
                                }
                            }
                            if(m.col_status == 6|| m.col_status == 7) {
                                if (m.deceased_name) {
                                    html += "<p>逝者:" + m.deceased_name + "</p>";
                                }
                            }
                            html+="</div>";

                        })
                        html+="<br />";
                    })
                    $(".visua_div").html(html);

                },
                error	: function(){
                    alert("服务器内部错误，请联系系统管理员");
                }
            });
        }
    }
    //  查看墓位产品
    $(document).on("click","#editProductInfo",function(){
        var name = $("input[name='no[]']:checked");
        <!--没有子级时触发事件-->
        if(name.length < 1 ) {
            alert("请选择数据！");
        }else{
            var tombar_id = '',flag=false;
            $.each($("input[name='no[]']:checked"),function(i,n){
                if(length==(i+1)){
                    tombar_id=tombar_id+$(this).val();
                    // devices=devices+ $(this).attr('data-devices');
                }else{
                    tombar_id=tombar_id+$(this).val()+',';
                }
            });
            if(flag){
                return;
            }
            var url = '{:url("Admin/Visua/product")}?tomb_id='+ tombar_id;
            console.log(url)
            $(this).attr("href",url);
        }
    });
    //查看档案
    $(document).on("click","#productInfo",function(){
        var name = $("input[name='no[]']:checked");
        <!--没有子级时触发事件-->
        if(name.length < 1 ) {
            alert("请选择数据！");
        }else{
            if(name.length > 1){
                alert("只能选择一条数据！");
                return;
            }
            if(name.attr("col-status") == 4){
                alert("无规划数据不能查看！");
                return;
            }
            // if(name.attr("col-status") == 0){
            //     alert("无产品数据不能查看！");
            //     return;
            // }
            var tombar_id = '',flag=false;
            var order_id='',selected_id_a=0;
            $.each($("input[name='no[]']:checked"),function(i,n){
                tombar_id=$(this).val();
                order_id=$(this).attr("order-id");
                selected_id_a=$(this).data("id");
            });
            if(flag){
                return;
            }

            var url = '{:url("Admin/Archives/edit")}?tomb_id='+tombar_id +'&order_id='+order_id+'&selected_id_a='+selected_id_a;

            console.log(url);
            $(this).attr("href",url);
        }
    });

    //产品信息
    $(document).on("click","#productInfo",function(){
        var name = $("input[name='no[]']:checked");
        console.log(name)
        // <!--没有子级时触发事件-->

    });
    Wind.use('noty', function () {
        //删除墓位
        $(document).on("click",".tombareacoldelete",function(){
            //var name = $("input[name='no[]']:checked").val();
            var length = $("input[name='no[]']:checked").length;
            if (length == 0) {
                alert("请选择墓位");
                return;
            }
            var col_id = '', flag = false;
            $.each($("input[name='no[]']:checked"), function (i, n) {
                if (length == (i + 1)) {
                    col_id = col_id + $(this).val();
                } else {
                    col_id = col_id + $(this).val() + ',';
                }
            });
            if (flag) {
                return;
            }
            var $this = $(this), type = $this.data('type'),
                msg       = $this.data('msg'),
                href = $this.data('href') + "?type=" + type + "&id=" + col_id;
            console.log(href)
            noty({
                text: msg,
                type: 'confirm',
                layout: "center",
                timeout: false,
                modal: true,
                buttons: [
                    {
                        addClass: 'btn btn-primary',
                        text: '确定',
                        onClick: function ($noty) {
                            $.getJSON(href).done(function (data) {
                                if (data.code == 1) {
                                    if (data.url) {
                                        location.href = data.url;
                                    } else if (refresh || refresh == undefined) {
                                        reloadPage(window);
                                    }
                                } else if (data.code == 0) {
                                    noty({
                                        text: data.msg,
                                        type: 'error',
                                        layout: 'center',
                                        callback: {
                                            afterClose: function () {
                                                if (data.url) {
                                                    location.href = data.url;
                                                }
                                            }
                                        }
                                    });
                                }
                            })
                        }
                    }, {
                        addClass: 'btn btn-danger',
                        text: '取消',
                        onClick: function ($noty) {
                            $noty.close();
                        }
                    }
                ]
            })
        })
    })

    // 添加墓位信息
    $(document).on("click","#addTombstoneInformation",function(){
        //var name = $("input[name='no[]']:checked").val();
        var length = $("input[name='no[]']:checked").length;
        if (length == 0) {
            alert("请选择墓位");
            return;
        }
        var col_id = '',flag=false;
        $.each($("input[name='no[]']:checked"),function(i,n){
            if(length==(i+1)){
                col_id=col_id+$(this).val();
                // devices=devices+ $(this).attr('data-devices');
            }else{
                col_id=col_id+$(this).val()+',';
            }
        });
        if(flag){
            return;
        }
        var url = "{:url('Information')}?col_id="+col_id
        console.log(col_id)
        $(this).attr("href",url);

    })
    $(document).on("click","#editTombarea",function(){
        var name = $("input[name='no[]']:checked");
        console.log(name)
        // <!--没有子级时触发事件-->
        // if(name.length < 1 ) {
        //
        // 	alert("请选择数据！");
        // }else{
        //
        // 	$(this).attr("href","{:url('Admin/Tombarea/add',array('id'=>1))}");
        //
        // }
    })

    //全选
    function selectAll(){
        var name = document.getElementsByName("no[]");
        for(var i=0;i<name.length;i++){
            name[i].checked=true;
        }
    }
    //全不
    function selectNone(){
        var name = document.getElementsByName("no[]");
        for(var i=0;i<name.length;i++){
            name[i].checked=false;
        }
    }
    //反选
    function selectInvert(){
        var name = document.getElementsByName("no[]");
        for(var i=0;i<name.length;i++){
            if(name[i].checked)
                name[i].checked=false ;
            else
                name[i].checked=true ;
        }
    }
</SCRIPT>
</body>
</html>


